<template>
  <div class="box">
    <!-- 折叠按钮图标 -->
    <div class="one">
      <span class="operation-span" @click="operation">
        <el-icon v-if="!isCollapse"><Expand /></el-icon>
        <el-icon v-else><Fold /></el-icon>
      </span>
    </div>
    <!-- 面包屑 -->
    <div class="two">
      <Breadcrumb></Breadcrumb>
    </div>
    <!-- 下拉菜单 -->
    <div class="three">
      <el-dropdown placement="bottom-end" @command="handleCommand">
        <span class="dropdown" style="outline: none">
          <el-avatar style="margin-right: 10px" :src="userInfo.url" />
          <span>{{ userInfo.name}}</span>
          <el-icon><CaretBottom /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="User" command="user">个人信息</el-dropdown-item>
            <el-dropdown-item icon="SwitchButton" command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <!-- 个人信息-->
    <el-dialog v-model="dialogVisible" title="个人信息" width="500">
      <el-descriptions direction="vertical" border style="margin-top: 20px">
        <el-descriptions-item :rowspan="2" :width="140" label="Photo" align="center">
          <el-image style="width: 100px; height: 100px" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
        </el-descriptions-item>
        <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
        <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
        <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
        <el-descriptions-item label="Remarks">
          <el-tag size="small">School</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false"> 修改 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineEmits, reactive, onMounted } from "vue";
import Breadcrumb from "@/components/Breadcrumb.vue";
import { useUserStore } from "@/stores/modules/user";
import { useRouter } from "vue-router";
import request from "@/utils/request";
const useUser = useUserStore();
const router = useRouter();
let isCollapse = ref(false); //侧边栏是否折叠
let emit = defineEmits(["operation", 2]);
const operation = () => {
  isCollapse.value = !isCollapse.value;
  emit("operation", isCollapse.value);
};
const dialogVisible = ref(false);
//
const handleCommand = (command) => {
  if (command === "user") {
    dialogVisible.value = true;
  } else if (command === "logout") {
    useUser.removeToken();
    router.push("/login");
  }
};
let userInfo = reactive({
  id: null,
  url: "",
  name: "",
  role: null,
  email: "",
});
// 用户信息 接口
const updateUserInfo = async () => {
  const res = await request.get("user/auth");
  //     // 用户信息赋值
  //   const { id, userAvatar: url, userName: name, userRole: role, userEmail: email } = res.data.data;
  // userInfo = { id, url, name, role, email };
if (res.data.code===200) {
  userInfo.id=res.data.data.id
  userInfo.url=res.data.data.userAvatar
  userInfo.name=res.data.data.userName
  userInfo.role=res.data.data.userRole
  userInfo.email=res.data.data.userEmail
}else{
  userInfo.id=""
  userInfo.url=""
  userInfo.name=""
  userInfo.role=""
  userInfo.email=""
}

};
onMounted(() => {
  updateUserInfo();
});
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid rgb(240, 240, 240);
  display: flex;
  .one {
    display: flex;
    justify-content: center;
    .operation-span > i:hover {
      background-color: rgb(246, 246, 246);
    }
    .operation-span {
      display: flex;
      justify-content: center;
      padding: 10px 0;
      cursor: pointer; //鼠标移入变为小手
      i {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        color: #333;
        border-radius: 10px;
      }
    }
  }
  .two {
    display: flex;
    width: 100%;
  }
  .three {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    // align-items: center;
    .dropdown {
      display: flex;
      align-items: center;
    }
  }
}
::v-deep .el-dialog > .el-dialog__header {
  padding-bottom: 0 !important;
}
</style>
